<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* position: absolute; */
            /* float: left; */
            /*
                区别:
                float：半脱离，文字环绕
                position：全脱离，不会出现文字环绕效果
            */
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio necessitatibus tempora, adipisci dignissimos voluptas hic. Ipsum nisi nam nulla illum! Reiciendis est ad dolores porro sint atque quaerat accusamus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam obcaecati perferendis dolor excepturi minus! Consequuntur magni quos, consectetur quisquam animi praesentium eos rerum facilis, aspernatur, unde cupiditate veritatis repellat iure!
    </div>
</body>
</html>